﻿class TextFont
{
    private _family: string;
    private _size: number;
    private _width: number;
    private _height: number;
    private _baseline: number;

    constructor(family: string = "\"Courier New\", Courier, monospace", size: number = 12)
    {
        this._family = family;
        this._size = size;

        // Preparing container
        var line = document.createElement("div"),
            body = document.body;
        line.style.position = "absolute";
        line.style.whiteSpace = "nowrap";
        line.style.font = size + "px " + family;
        body.appendChild(line);

        // Now we can measure width and height of the letter
        var text = "mmmmmmmmmm"; // 10 symbols to be more accurate with width
        line.innerHTML = text;
        this._width = line.offsetWidth / text.length;
        this._height = line.offsetHeight;

        // Now creating 1px sized item that will be aligned to baseline
        // to calculate baseline shift
        var span = document.createElement("span");
        span.style.display = "inline-block";
        span.style.overflow = "hidden";
        span.style.width = "1px";
        span.style.height = "1px";
        line.appendChild(span);

        // Baseline is important for positioning text on canvas
        this._baseline = span.offsetTop + span.offsetHeight;

        document.body.removeChild(line);
    }

    getFamily(): string
    {
        return this._family;
    }

    getSize(): number
    {
        return this._size;
    }

    getHeight(): number
    {
        return this._height;
    }

    getWidth(): number
    {
        return this._width;
    }

    getBaseline(): number
    {
        return this._baseline;
    }
}